<template>
  <div class="index-box">
    <div class="contetn_left">
      <!-- <div class="pagetab">
        <div class="item">实时监测</div>
        <div class="item">统计分析</div>
      </div> -->
      <ItemWrap
        class="contetn_left-top contetn_lr-item"
        title="调研区域统计"
        :show-download="true"
        @download="downloadOrg"
      >
        <LeftTop ref="leftTopRef" />
      </ItemWrap>
      <ItemWrap
        class="contetn_left-center contetn_lr-item"
        title="调研指标统计"
        :show-download="true"
        @download="downloadType"
      >
        <LeftCenter ref="leftCenterRef" />
      </ItemWrap>
      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="评价结果分布"
        :show-download="true"
        @download="downloadScore"
      >
        <leftBottom ref="leftBottomRef"></leftBottom>
      </ItemWrap>
      <map-legend></map-legend>
    </div>
    <div class="contetn_center"></div>
    <div class="contetn_right">
      <div class="select-box">
        <select-box v-model:value="selectValue"></select-box>
      </div>
    </div>
    <div
      id="mapContainer"
      class="map-container amap-container"
      ref="mapContainer"
    ></div>
  </div>
</template>

<script setup lang="ts">
import ItemWrap from "@/components/itemWrap";
import LeftTop from "./components/leftTop.vue";
import LeftCenter from "./components/leftCenter.vue";
import leftBottom from "./components/leftBottom.vue";
import SelectBox from "./components/selectBox.vue";
import mapLegend from "./components/mapLegend.vue";

import AMapWrapper from "@/utils/AMapWrapper";
import { getLayerData } from "@/api";
import { onMounted, ref, watch, onActivated, nextTick, onUnmounted } from "vue";
import { mapLayerEnum } from "@/enums/mapLayerEnums";
import { LayerInfoType } from "@/types";
import { useMapLayerStore } from "@/stores";
import { renderDataToZhOnMapInfo } from "@/utils/renderMapData";

const mapLayerStore = useMapLayerStore();
const mapContainer = ref<HTMLElement | null>(null);
const leftBottomRef = ref<any>(null);
const leftCenterRef = ref<any>(null);
const leftTopRef = ref<any>(null);

const selectValue = ref<mapLayerEnum>(mapLayerEnum.RECTIFICATION);
let mapInstance: AMapWrapper | null = null;

const downloadScore = () => {
  leftBottomRef.value.download();
};
const downloadOrg = () => {
  leftTopRef.value.download();
};
const downloadType = () => {
  leftCenterRef.value.download();
};
const initMap = () => {
  mapInstance = AMapWrapper.getInstance();
  mapInstance.onMapLoad(() => {
    getCurrentLayerData();
    // 在这里可以执行地图加载后的操作
  });
  mapInstance.init({
    zoom: 11,
    center: { lng: 113.5171, lat: 22.166 },
    key: "ccbfcceb00da00ad6c11b3244ccd81ea",
    element: "mapContainer",
    mapStyle: "amap://styles/darkblue",
  });
};
const getCurrentLayerData = () => {
  mapInstance?.closeInfoWindow();
  mapLayerStore.setMapType(selectValue.value);
  getLayerData({ type: selectValue.value })
    .then((res: any) => {
      // console.log(res);
      const data = res.data as Array<LayerInfoType>;
      if (mapInstance) {
        mapInstance.clearPOIs();
        const divObject = {
          [mapLayerEnum.ISSUE]: () => {
            const poi = new URL("@/assets/img/poi/issue.png", import.meta.url)
              .href;
            return `<img src="${poi}" alt="issue" />`;
          },
          [mapLayerEnum.PROJECT]: () => {
            const poi = new URL("@/assets/img/poi/project.png", import.meta.url)
              .href;
            return `<img src="${poi}" alt="issue" />`;
          },
          [mapLayerEnum.RECTIFICATION]: () => {
            const poi = new URL(
              "@/assets/img/poi/rectification.png",
              import.meta.url
            ).href;
            return `<img src="${poi}" alt="issue" />`;
          },
        };

        // 创建弹窗内容
        const createInfoWindowContent = (data: any) => {
          const showData = renderDataToZhOnMapInfo(data);
          const infoString = showData
            .map((item) => {
              const { key, label } = item;
              return `<div class="map-info-item">
              <div class="info-item_key">${key}:</div>
              <div class="info-item_label"> ${label}</div>
              </div>`;
            })
            .join("");
          const div = document.createElement("div");
          div.className = "map-info-window";
          div.innerHTML = infoString;
          return div;
        };

        const layerType = selectValue.value as mapLayerEnum;
        mapLayerStore.setMapData(layerType, data);
        const innerHTML = divObject[layerType]();
        const div = document.createElement("div");
        div.className = "poi-marker issue_poi";
        div.innerHTML = innerHTML;
        mapInstance.addPOIs(data, div, data, (position, data, marker) => {
          const content = createInfoWindowContent(data);
          mapInstance?.openInfoWindow(position, content);
        });
        // // 注册点击事件处理函数
        // mapInstance.onMarkerClick((position, data) => {
        //   console.log('点击了标记:', position, data);
        // });
      }
    })
    .catch((err: Error) => {
      console.log(err);
    });
};
watch(
  () => selectValue.value,
  () => {
    getCurrentLayerData();
  }
);
onMounted(() => {
  nextTick(() => {
    initMap();
  });
});
onUnmounted(() => {
  mapInstance?.destroy();
});
</script>

<style lang="scss">
.poi-marker {
  width: 40px;
  height: 40px;
  user-select: none;

  img {
    width: 40px;
    height: 40px;
  }
}

.map-info-window {
  padding: 16px;
  border-radius: 8px;
  background: #07f7a888;
  position: relative;
  color: #fff;
  // color: #e3b337;

  // 添加倒三角指向
  &::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #07f7a8aa transparent transparent transparent;
  }

  .map-info-item {
    display: flex;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .info-item_key {
    width: 100px;
    flex-shrink: 0;
  }

  .info-item_key {
  }
}
</style>
<style scoped lang="scss">
.index-box {
  width: 100%;
  display: flex;
  min-height: calc(100% - 64px);
  justify-content: space-between;
  // position: relative;
}

// .select-box {
//   width: 400px;
// }
//左边 右边 结构一样
.contetn_left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  width: 540px;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  z-index: 9;
  background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.4));
}

.contetn_center {
  flex: 1;
  margin: 0 54px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  .contetn_center-bottom {
    height: 315px;
  }
}

.contetn_lr-item {
  height: 328px;
}

.map-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  min-height: 600px;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
</style>
